<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        .login {
            width: 100%;
            height: 220px;
            background-image: url(../image/my/personal_bkg.jpg);
            background-repeat: no-repeat;
            background-size: contain;
            position: relative;
        }

        .login .personal_logo {
            position: absolute;
            top: 60px;
            width: 64px;
            height: 64px;
            left: 70px;
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            margin-left: 150px;
        }

        .login .userinfo .title {
            font-size: 20px;
            color: #fff;
        }

        .login .userinfo .subtitle {
            font-size: 14px;
            color: #fff;
            border: 1px solid #fff;
            display: inline-block;
            padding: 3px;
            border-radius: 4px;
            margin-top: 5px;
        }
    </style>
</head>

<body>




    <div class="aui-list login" tapmode onclick="fnCheckLogin();">
        <img id="userAvatar" src="../image/my/profile_default.png" class="personal_logo">
        <div class="userinfo">
            <div id="userAccount" class="title">name</div>
            <div id="userRegion" class="subtitle">type</div>
        </div>
    </div>

    <section class="aui-grid">
        <div class="aui-row">
            <div class="aui-col-xs-4" tapmode onclick="openGear()">
                <i class="aui-iconfont aui-icon-gear"></i>
                <div class="aui-grid-label">设置</div>
            </div>
            <div class="aui-col-xs-4">
                <div class="aui-badge">88</div>
                <i class="aui-iconfont aui-icon-refresh"></i>
                <div class="aui-grid-label">巡更</div>
            </div>
            <div class="aui-col-xs-4">
                <div class="aui-badge">88</div>
                <i class="aui-iconfont aui-icon-flag"></i>
                <div class="aui-grid-label">出警</div>
            </div>
            <div class="aui-col-xs-4">
                <i class="aui-iconfont aui-icon-calendar"></i>
                <div class="aui-grid-label">办公室</div>
            </div>
            <div class="aui-col-xs-4">
                <i class="aui-iconfont aui-icon-comment"></i>
                <div class="aui-grid-label">公告栏</div>
            </div>
        </div>
    </section>




    <ul class="aui-list aui-list-in">
        <li class="aui-list-header">
            My
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                Item1
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                Item1
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                Item1
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                Item1
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner aui-list-item-arrow">
                Item1
            </div>
        </li>
    </ul>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script>
    function fnOpenWin(target) {
        api.openWin({
            name: target,
            url: './my/' + target + '.html',
            bounces: false
        });
    };

    function fnCheckLogin() {
        var userInfo = $api.getStorage('userInfo');
        var target = userInfo && userInfo.accessToken ? 'person_info' : 'login';
        fnOpenWin(target);
    };

    function openGear() {
        // alert('gear');
        api.openWin({
            name: 'gear',
            url: './my/gear.html',
            // pageParam: {
            //     url: banners['data'][ret.index]['url']
            // },
            delay: 200,
            reload: true,
            allowEdit: true
        });
    }
</script>

</html>
